<template>
  <div class="driver-statistics">
    <!-- 时间选择器 -->
    <div class="time-selector" @click="showCalendar">
        <div>时间段</div>
        <div>{{ timeRangeText }}</div>
        <div class="iconfont" :class="show ? 'icon-shang' : 'icon-xia'"></div>
    </div>

    <!-- 统计类型切换 -->
    <div class="stat-tabs">
      <van-tabs v-model="activeTab">
        <van-tab title="按评分">
            <!-- 排名展示部分 -->
            <div class="ranking-list">
                <div class="rank-item rank-2">
                    <div class="crown silver"></div>
                    <div class="score">分</div>
                    <div class="rank-label">No.2</div>
                </div>
                <div class="rank-item rank-1">
                    <div class="crown gold"></div>
                    <div class="name">hh</div>
                    <div class="score">0分</div>
                    <div class="rank-label">No.1</div>
                </div>
                <div class="rank-item rank-3">
                    <div class="crown bronze"></div>
                    <div class="score">分</div>
                    <div class="rank-label">No.3</div>
                </div>
            </div>
        </van-tab>
        <van-tab title="按里程">
            按里程排序
        </van-tab>
        <van-tab title="按次数">
            按次数排序
        </van-tab>
      </van-tabs>
    </div>



    <!-- 日历选择弹窗 -->
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <van-calendar 
        type="range"
        :min-date="minDate"
        @close="onClose"
        @confirm="onConfirm"
        :poppable="false"
        :show-confirm="true"
        :style="{ height: '100%' }"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '',
      show: false,
      activeTab: 0,
      dateRange: [],
      minDate: new Date(2020, 0, 1), // 设置最小可选日期
    }
  },

  computed: {
    timeRangeText() {
      if (this.dateRange.length === 2) {
        return `${this.dateRange[0]} 至 ${this.dateRange[1]}`;
      }
      return '请选择时间段';
    }
  },

  methods: {
    showCalendar() {
      console.log('显示日历');
      this.show = true;
      console.log('show状态：', this.show);
    },

    onClose() {
      this.show = false;
    },

    onConfirm(date) {
      this.dateRange = date.map(d => {
        return this.formatDate(d);
      });
      this.show = false;
    },

    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
}
</script>

<style scoped>
.time-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
}

.ranking-list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px;
  gap: 20px;
}

.rank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.crown {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid;
  margin-bottom: 5px;
  position: relative;
}

.crown::after {
  content: '>';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  color: currentColor;
}

.gold {
  border-color: #FFD700;
  color: #FFD700;
}

.silver {
  border-color: #C0C0C0;
  color: #C0C0C0;
}

.bronze {
  border-color: #CD7F32;
  color: #CD7F32;
}

.name {
  font-size: 14px;
  margin: 5px 0;
}

.score {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.rank-label {
  background-color: #1989fa;
  color: white;
  padding: 2px 10px;
  font-size: 12px;
}

/* 调整第一名的位置 */
.rank-1 {
  margin-bottom: 20px;
}

/* 调整第二名和第三名的位置 */
.rank-2, .rank-3 {
  margin-bottom: 10px;
}

.van-calendar {
  height: 100%;
}

:deep(.van-calendar__body) {
  height: calc(100% - 50px);
}


/* tab样式 */
:deep(.van-tabs__line){
    display: none;
}
:deep(.van-tab--active){
    color: #929bc9;
    background-color: #f3f8fc;
}
:deep(.van-tabs--line .van-tabs__wrap){
    border: 1px solid #dddee0;
    border-radius: 8px;
    margin: 0 10px;
}

/* 字体图标 */
@font-face {
  font-family: "iconfont"; /* Project id 4762378 */
  src: url('//at.alicdn.com/t/c/font_4762378_0r73cdj0qarh.woff2?t=1732711197465') format('woff2'),
       url('//at.alicdn.com/t/c/font_4762378_0r73cdj0qarh.woff?t=1732711197465') format('woff'),
       url('//at.alicdn.com/t/c/font_4762378_0r73cdj0qarh.ttf?t=1732711197465') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 7px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shang:before {
  content: "\e64e";
}

.icon-xia:before {
  content: "\e64f";
}

.icon-shizhong:before {
  content: "\e74f";
}

.icon-youjiantou:before {
  content: "\e633";
}


</style>
